<template>
  <div id="center">
    <div class="percent">
      <!--        <div class="item bg-color-black">-->
      <!--          <span>已报到：</span>-->
      <!--          <div class="stuNum">{{arriveStu}}</div>-->
      <!--        </div>-->
      <div class="water">
        <span>已验证：</span>
        <dv-water-level-pond :config="water" class="dv-wa-le-po"/>
        <!--          <Echart-->
        <!--              :options="options"-->
        <!--              :id="id"-->
        <!--              height="100px"-->
        <!--              width="100px"-->
        <!--          ></Echart>-->
      </div>
    </div>
  </div>
</template>

<script>
// import CenterChart from '@/components/echart/center/centerChartRate'

export default {
  props: ["arriveStu", "arriveRate"],
  data() {
    return {
      water: {
        data: [],
        shape: 'roundRect',
        formatter: '{value}' + "  人",
        waveNum: 3
      },
    }
  },
  watch: {
    arriveStu(n, o) {
      let arr = []
      arr[0] = n
      this.water.data = arr
      this.water = {...this.water}
    }
  }
}
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: row;
  align-items: center;

  .percent {
    width: 100%;
    display: flex;
    //flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    //padding: 5%;
    .item {
      width: 45%;
      height: 120px;
      display: flex;
      //flex-direction: column;
      align-items: center;
      justify-content: center;

      span {
        margin-top: 18px;
        font-size: 30px;
        display: flex;
        justify-content: center;
      }

      .stuNum {
        margin-top: 5%;
        font-size: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        height: 50%;
      }
    }

  }

  .water {
    //margin-top: 15%;
    width: 100%;
    display: flex;
    //flex-direction: column;
    align-items: center;
    justify-content: center;

    span {
      font-size: 30px;
    }

    .dv-wa-le-po {
      margin-top: 5%;
      height: 120px;
      width: 165px;
    }
  }
}

//}
</style>
